<template>
    <div class="Grant">
        <div>
            <div class="layoutHeader">
                <a-select :options="dimData"
                          @select="selectDimNode"
                          :getPopupContainer="p=>p.parentNode"
                          v-model="dimId"
                          style="width:80%;"
                ></a-select>
                <a-checkbox style="margin-left: 10px" v-if="showGroupContainsSub" :checked="groupContainsSub" @change="changeGroupContainsSub(groupContainsSub)">{{i18n('form.containSub','包含下级')}}</a-checkbox>
            </div>
            <div class="layoutBody">
                <rx-tree ref="rxTree"
                         :treeData="orgData"
                         :async="false"
                         :loadByParent="onLoadGroupTree"
                         :multiSelect="false"
                         :showTreeIcon="false"
                         @select="selectGroupNode"
                         :expandOnLoad="0"
                         autoExpandParent="true"
                         id-field="groupId"
                         text-field="title"
                         parent-field="parentId"
                >
                </rx-tree>


            </div>
        </div>
        <div>
            <rx-fit>
                <div slot="toolheader" foldbtn="false">
                    <div style="padding: 10px 0;display: flex;justify-content: space-between">
                        <span style="display:inline-block;">{{i18n('list.groupPrivilegeRes','组资源授权')}}</span>
                        <span style="display:inline-block;">
                            <a-checkbox style="margin-right: 10px" :checked="!checkStrictly"
                                        @change="changeCheckStrictly(checkStrictly)">{{i18n('cascadeSelect','级联选择')}}</a-checkbox>
                            <a-button type="primary" @click="saveOsGroupMenu">{{i18n('list.saveOsGroupMenu','保存菜单权限')}}</a-button>
                        </span>
                    </div>
                </div>
                <a-tree
                    checkable
                    v-model="checkedKeys"
                    @check="onCheck"
                    :treeData="permissions"
                    :checkStrictly="checkStrictly"
                    showIcon
                >
                    <!--     菜单       -->
                    <a-icon slot="C" type="bars"/>
                    <!--     按钮       -->
                    <my-icon slot="F" type="iconanniu"/>
                    <a-icon slot="I" type="api"/>
                </a-tree>

            </rx-fit>
        </div>
    </div>
</template>

<script>
import {RxLayout, RxGrid, RxFit, RxTree} from "@lowcode/jpaas-common-lib"
import OsGroupGrantExt from '@/api/user/org/osGroupGrantExt'

export default {
    name: "OsGroupGrant",
    mixins: [OsGroupGrantExt],
    components: {
        RxLayout,
        RxFit,
        RxGrid,
        RxTree
    },
    data() {
        return {
            checkStrictly: true,
            showGroupContainsSub:true,
            groupContainsSub:false
        }
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"osGroupPrivilege",key);
        },
        changeCheckStrictly(value) {
            this.checkStrictly = !value;
            /**
             * 级联模式 需要将未全选中的主节点菜单先去掉
             * 非级联模式 需要将去掉的取回来
             */
            this.initCheckedKeys();

        },
        initCheckedKeys() {
            var arr = [];
            //级联模式
            if (!this.checkStrictly) {
                for (let i = 0; i < this.checkedKeys.length; i++) {
                    var isParent = false;
                    for (let j = 0; j < this.permissions.length; j++) {
                        if (this.checkedKeys[i] == this.permissions[j].key) {
                            isParent = true;
                            break;
                        }
                    }
                    if (isParent) {
                        this.parentIds.push(this.checkedKeys[i]);
                    } else {
                        arr.push(this.checkedKeys[i]);
                    }
                }
                this.checkedKeys = arr;
            } else {
                this.checkedKeys.push(...this.parentIds);
                //去重
                this.checkedKeys = Array.from(new Set(this.checkedKeys));
            }
        },
        changeGroupContainsSub(value){
            this.groupContainsSub=!value;
        },

    }
}
</script>

<style scoped>
.Grant {
    display: flex;
    width: 100%;
    height: 100%;
    background: white;
}

.Grant > div {
    flex: 1;
}

.Grant > div:nth-child(1) {
    padding: 10px;
    border-right: 1px solid #e8e8e8;
}

.layoutbox {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.layoutBody {
    flex: 1;
    padding-top: 6px;
    overflow: auto;
}

.toolTitle {
    line-height: 40px;
    color: rgba(0, 0, 0, 0.85);
}


.group-drant-layout > .rx-content > .rx-center > div {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0;
    background: #f0f2f5;
}
</style>